<template>
    <div id="container">
    <el-row class='infobox'>
        <el-col :span=8 >
            <nuxt-link :to="`/hotel/id?id=${id}`">
            <img :src="hotelItem.photos" alt=""></nuxt-link>
        </el-col>
        <el-col :span=10 class='text'>
           <h2 class='title'>{{hotelItem.name}}</h2>
           <p class='leixing'> {{hotelItem.hoteltype.name}}</p>
            <div class="textbox">
            <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分">
            </el-rate>
           <span class='data'> <span>{{hotelItem.all_remarks}}</span> 条评价</span>
            <span class='data'> <span>58</span> 篇游记</span>
            </div>
            <p class='place'> <span class='el-icon-location'></span> 位于: {{hotelItem.address}}</p>
        </el-col>
        <el-col :span=5 class='info-right'>
            <el-row 
            class='preferential'
            v-for='(item,index) in hotelItem.products'
            :key='index'
            @click.native="push('https://passport.ctrip.com/user/login?backurl=https%3A%2F%2Fhotels.ctrip.com%2Fhotels%2F694679.html')"
            >
            <span class="hotelname">{{item.name}}</span> <span class='right'> <span class="color">￥{{item.price}}</span>起<span class='el-icon-arrow-right'></span> </span></el-row> 
        </el-col>
    </el-row>
    </div>
    </template>
    <script>
export default {
        data(){
            return{
                   value:this.hotelItem.stars
            }
        },   
        props:['hotelItem','id'],
        methods:{
            push(url){
                
                window.open(url)
            }
        }       
    }
</script>
<style lang='less' scoped>
.infobox{
        height: 264px;
        padding:20px 0px;
        border-bottom: 1px solid #eeeeee;
            img{
            cursor: pointer;
            height: 210px;
            width: 320px;
           
            }
.title{
    font-weight: 400;
    font-size: x-large;
    }
 .leixing{
        font-size: 16px;
        color:#999999;
      
    }
.textbox{
     padding:0px 0px;
    }
.data{
    padding: 0 15px;
    span{
      color:#ff9900;
    }
}
.el-icon-star-on{
        color:#f7ba2a;
        font-size: 24px;
    }
.el-icon-star-off{
    color:#eff2f7;
    font-size: 24px;
}
.score{
    color: #ffc552
}
.place{
    font-size: 14px;
    color:#666666
    }
.info-right{
    margin-top: 25px;
}
.preferential{
    cursor: pointer;
    display:flex;
    height: 48px;
    padding:12px 4px ;
    border-bottom: 1px solid #ebeef5;
    &:hover {
        background-image: linear-gradient(180deg, #fff, #f5f7fa);
        }
    }
.hotelname{
    font-size: 13px;
    flex:1;
    color:#7d7878
    }
.right{
    width:80px ;
    }
.color{
    color:#ff9900
    }
.el-rate{
    display: inline-block;
 }
            
}   
</style>